<template>
  <el-col :sm="12" :lg="6" v-if="this.legal == false" class="error">
    <el-result icon="error" title="错误提示" subTitle="无编辑权限"></el-result>
  </el-col>


  <div id="edit" v-else>
    <topnav :questionnaireId="questionnaireId" @leave='leave'></topnav>
    <left-choose @addQuestion="addQuestion"></left-choose>

    <qa-set
        :isDate="isDate"
        :begin="begin"
        :end="end"
        :isAutoLabel="isAutoLabel"
        :randomType="randomType"
        :isAutoSubmit="isAutoSubmit"
        :numavi="store"
        :isAvinumset="store!=null"
        @changeDate="changeDate"
        @changeBegin="changeBegin"
        @changeEnd="changeEnd"
        @changeLabel="changeLabel"
        @changeSubmit="changeSubmit"
        @changeRandom="changeRandom"
        @numavichange="numAviChange">
    </qa-set>


    <right-create
        ref="right"
        :questionnaireId="questionnaireId"
        @initNumSet="initNumSet"
        @initDate="initDate"
        @initBegin="initBegin"
        @initEnd="initEnd"
        @initLabel="initLabel"
        @initSubmit="initSubmit"
        @initRandom="initRandom"
        @changeState="changeState">
    </right-create>

    <el-backtop :right="2"></el-backtop>
  </div>
  
</template>

<script>
import Topnav from '../components/Topnav' //TODO: inside 改动此处
import LeftChoose from '../components/LeftChoose'
import RightCreate from '../components/RightCreate'
import QaSet from '../components/QaSet'
export default {
  name:'Edit',
  components: {
    Topnav,
    LeftChoose,
    RightCreate,
    QaSet,
  },
  data(){
   return {
     isAutoLabel: true,
     randomType: '',
     isAutoSubmit: false,
     begin: null,
     end: null,
     legal: true,
     isDate: false,
     store: null,
   }
  },
  computed:{
    questionnaireId() {
      return parseInt(this.$route.query.questionnaireId)
    }
  },
  methods: {
    addQuestion(type) {
      // console.log('here');
      this.$refs.right.addQuestion(type)
    },
    changeDate(isDate) {
      this.isDate = isDate
      this.$refs.right.isDate = isDate
      // this.$refs.right.apiEditQuestionnaire()
    },
    initDate(isDate) {
      this.isDate = isDate
      this.$refs.right.isDate = isDate
    },
    changeLabel(isAutoLabel) {
      this.isAutoLabel = isAutoLabel
      this.$refs.right.isAutoLabel = isAutoLabel
      // this.$refs.right.apiEditQuestionnaire()
    },
    initLabel(isAutoLabel) {
      this.isAutoLabel = isAutoLabel
      this.$refs.right.isAutoLabel = isAutoLabel
    },
    changeSubmit(isAutoSubmit) {
      this.isAutoSubmit = isAutoSubmit
      this.$refs.right.isAutoSubmit = isAutoSubmit
      // this.$refs.right.apiEditQuestionnaire()
    },
    initSubmit(isAutoSubmit) {
      this.isAutoSubmit = isAutoSubmit
      this.$refs.right.isAutoSubmit = isAutoSubmit
    },
    changeRandom(randomType) {
      this.randomType = randomType
      if(randomType) {
        this.$refs.right.randomType = 'random'
      }else {
        this.$refs.right.randomType = ''
      }
      
      // this.$refs.right.apiEditQuestionnaire()
    },
    initRandom(randomType) {
      if(randomType == '' || randomType==null){
        this.randomType = false
        this.$refs.right.randomType = randomType  
      }
    },
    changeBegin(begin) {
      this.begin = begin
      this.$refs.right.begin = begin
      // this.$refs.right.apiEditQuestionnaire()
    },
    initBegin(begin) {
      this.begin = begin
      this.$refs.right.begin = begin
    },
    changeEnd(end) {
      this.end = end
      this.$refs.right.end = end
      // this.$refs.right.apiEditQuestionnaire()
    },
    initEnd(end) {
      this.end = end
      this.$refs.right.end = end
    },
    changeState() {
      this.legal = false
    },
    initNumSet(num) {
      this.store = num
      this.$refs.right.store = num
      console.log(this.store);
    },
    numAviChange(num) {
      this.store = num
      this.$refs.right.store = num
      // this.$refs.right.apiEditQuestionnaire()
    },
    leave() {
      this.$refs.right.apileave()
    }
  }
}

</script>

<style scoped>
  @import url('~assets/css/base.css');

  .edit {
    height: 100%;
  }

  body, html{
    height: 100%;
  }

  .error {
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>
